<template>
	<view class="address-edit-container">
		<!-- <u-navbar :title="isEdit ? '编辑地址' : '新增地址'" :autoBack="true"></u-navbar> -->
		<scroll-view scroll-y class="form-container">
			<!-- regionget -->
			<u-form :model="form" ref="uForm" labelPosition="top" labelWidth="auto">
				<u-form-item label="收货人" prop="name" borderBottom>
					<u-input v-model="form.name" placeholder="请输入收货人姓名" border="none"></u-input>
				</u-form-item>

				<u-form-item label="手机号码" prop="phone" borderBottom>
					<u-input v-model="form.phone" placeholder="请输入手机号码" border="none" type="number"></u-input>
				</u-form-item>

				<u-form-item label="所在地区" prop="region" borderBottom>
					<regionget :region="form.region" @getregion="getregion"></regionget>
				</u-form-item>

				<u-form-item label="详细地址" prop="detailAddress" borderBottom>
					<u-input v-model="form.detailAddress" placeholder="街道、楼牌号等" border="none" type="textarea"></u-input>
				</u-form-item>

				<view class="form-item-extra">
					<text class="label">设为默认地址</text>
					<u-switch v-model="form.isDefault" activeColor="#2979ff" size="20"></u-switch>
				</view>

				<view class="form-item-extra">
					<text class="label">地址标签</text>
					<view class="tag-group">
						<u-tag v-for="tag in tags" :key="tag.value" :text="tag.label"
							:type="form.tag === tag.value ? 'primary' : 'info'" size="medium" shape="circle"
							@click="form.tag = tag.value"></u-tag>
					</view>
				</view>
			</u-form>
			<!-- 删除按钮（编辑模式显示） -->
			<view class="delete-btn">
				<!-- <u-button type="primary"  shape="circle" :disabled="logining" :loading="logining" @click="saveAddress">保存</u-button> -->
				<u-button type="primary" text="保存" @click="saveAddress()" shape="circle" :disabled="logining"
					:loading="logining"></u-button>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import regionget from '@/components/regionget';//地区选择数据
	import {
		httpsend
	} from '@/api/api';
	export default {
		components: {
			regionget
		},
		data() {
			return {
				logining: false,
				isEdit: false, // 是否是编辑模式
				tags: [{
						label: '家',
						value: 'home'
					},
					{
						label: '公司',
						value: 'company'
					},
					{
						label: '学校',
						value: 'school'
					},
					{
						label: '无',
						value: 'null'
					}
				],
				form: {
					id: null,
					name: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					region: '', // 显示用
					detailAddress: '',
					isDefault: false,
					tag: ''
				},
				rules: {
					name: [{
							required: true,
							message: '请输入收货人姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '长度在2到10个字符',
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: '请选择所在地区',
						trigger: 'change'
					}],
					detailAddress: [{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 50,
							message: '长度在5到50个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		onLoad(options) {
			if (!!options.data) {
				const item = JSON.parse(decodeURIComponent(options.data))
				this.form.id = item.id;
				this.form.name = item.name;
				this.form.phone = item.phone;
				this.form.province = item.province;
				this.form.city = item.city;
				this.form.district = item.district;
				this.form.region = `${item.province} ${item.city} ${item.district}`;
				this.form.detailAddress = item.detailAddress;
				this.form.isDefault = item.isDefault;
				this.form.tag = item.tag;
				this.isEdit = true
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//获取地区组件传递数据	
			getregion(e) {
				console.log('region', e);
				const [province, city, district] = e.value
				this.form.province = province.label
				this.form.city = city.label
				this.form.district = district.label
				this.form.region = `${province.label} ${city.label} ${district.label}`
			},

			// 保存地址
			async saveAddress() {
				try {
					await this.$refs.uForm.validate()
					this.logining = true;
					const addressData = {
						name: this.form.name,
						phone: this.form.phone,
						province: this.form.province,
						city: this.form.city,
						district: this.form.district,
						detailAddress: this.form.detailAddress,
						isDefault: this.form.isDefault,
						tag: this.form.tag
					}
					const result = await httpsend('saveaddress',JSON.stringify(addressData));
					if (result?.code === 1) {
						this.logining = false;
						this.$api.msg(result.msg);
						uni.navigateBack();
					} else {
						this.$api.msg(result.msg);
						this.logining = false;
					}

				} catch (err) {
					console.log('err', err);
					this.logining = false;
				}
			},
		}
	}
</script>


<style>
	.address-edit-container {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.form-container {
		height: calc(100vh - 44px);
		padding: 20rpx;
		box-sizing: border-box;
	}

	.u-form-item {
		margin-bottom: 0;
		padding: 24rpx 0;
		background-color: #fff;
	}

	.u-form-item:not(:last-child) {
		border-bottom: 1rpx solid #f5f5f5;
	}

	.u-form-item .u-form-item__body {
		padding: 0 20rpx;
	}

	.form-item-extra {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}

	.form-item-extra .label {
		font-size: 28rpx;
		color: #333;
	}

	.form-item-extra .tag-group {
		display: flex;
	}

	/* 处理u-tag的样式 */
	.form-item-extra .tag-group .u-tag {
		margin-left: 20rpx;
	}

	.delete-btn {
		margin-top: 40rpx;
	}

	.delete-btn .u-btn {
		height: 80rpx;
	}
</style>